 <style>
 .help-block{color:red!important;}
 </style>
 <div class="pageheader">
      <h2><i class="fa fa-home"></i> Hierarchy </h2>
    </div>
    
    <div class="contentpanel">
       
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"><strong> Create A New Hierarchy </strong></h4>
        </div>
	<form action="<?php echo site_url("teacher").'/'.$this->uri->segment(2); ?>/hieraechy_form" method="post"  class="form-horizontal">
        <div class="panel-body panel-body">
			  
				  <?php if($this->session->flashdata('message_board_added') !== false){
				?> <div class="alert alert-success fade in">
					<a href="#" class="close" data-dismiss="alert">&times;</a>
					<strong>Success!</strong> Data Submitted successfully.
				</div>
					<?php
				  } ?>
				  
				<div class="row">
					<div class="col-md-4">
					  <h5 class="subtitle">Choose Board</h5>
					</div>
						
					<div class="col-md-4">
					  <h5 class="subtitle">Choose Class</h5>
						
					</div><!-- col-md-4 -->
					<div class="col-md-4">
					  <h5 class="subtitle">Choose Subject</h5>
						
					</div><!-- col-md-4 -->
				</div><!-- col-md-4 -->
					<div class="html_to">
					<div class="row">
							<div class="form-group col-md-3">					
									 <?php $boards = $this->db->get_where('tbl_courses',array('type'=>'board'))->result_array(); ?>
									<select name="course_board[]" class="form-control select2">
									  <option value="">Choose a Board...</option>
									  <?php foreach($boards as $board){ ?>
									  <option value="<?php echo $board['id'];?>"><?php echo $board['name'];?></option>
									  <?php } ?>
									</select>
								</div>
							<div class="col-md-1"></div>
								<div class="form-group col-md-3">
								<?php $classes = $this->db->get_where('tbl_courses',array('type'=>'class'))->result_array(); ?>
									<select name="course_class[]" class="form-control select2">
									  <option value="">Choose a Class...</option>
									   <?php foreach($classes as $class){ ?>
											<option value="<?php echo $class['id'];?>"><?php echo $class['name'];?></option>
									  <?php } ?>
									</select>
								</div>
							<div class="col-md-1"></div>
								<div class="form-group col-md-3">
									<?php $subjects = $this->db->get_where('tbl_courses',array('type'=>'subject'))->result_array(); ?>
									<select name="course_subject[0][]" class="form-control select2" id="subject_select" multiple="multiple" data-placeholder="Choose a Subject...">
									  <option value="">Choose a Subject...</option>
									  <?php foreach($subjects as $subject){ ?>
											<option value="<?php echo $subject['id'];?>"><?php echo $subject['name'];?></option>
									  <?php } ?>
									</select>
								</div>
								<div class="col-md-1">
								<button type="button" class="btn btn-default" onclick="deleteParentElement(this.parentNode.parentNode)">
										<i class="fa fa-trash-o"></i>
								</button>
						   </div>
						</div>
					</div>
        </div><!-- panel-body -->
		
			<div class="row" style="margin-bottom:10px;">
				<div class="col-md-8"></div>
				<div class="col-md-2"><button type="button" onclick="return add_row()" class="btn btn-warning btn-xs pull-right m-t-10"><i class="fa fa-plus"></i> Add more</button></div>
			</div>
        
        <div class="panel-footer">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-3">
				  <button type="submit" class="btn btn-success">Submit</button>&nbsp;
				  <button class="btn btn-default">Cancel</button>
				</div>
			</div>
		</div><!-- panel-footer -->
        
			 		
	</form>
      </div><!-- panel -->  
	  
    </div><!-- contentpanel -->
    
  </div><!-- mainpanel -->
 
  
</section>


<script src="<?php echo base_url();?>adm/js/jquery-1.10.2.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php echo base_url();?>adm/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>adm/js/bootstrapValidator.js"></script>
<script src="<?php echo base_url();?>adm/js/modernizr.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.sparkline.min.js"></script>
<script src="<?php echo base_url();?>adm/js/toggles.min.js"></script>
<script src="<?php echo base_url();?>adm/js/retina.min.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.cookie.js"></script>
<script src="<?php echo base_url();?>adm/js/jquery.datatables.min.js"></script>
<script src="<?php echo base_url();?>adm/js/select2.min.js"></script>
<script src="<?php echo base_url();?>adm/js/custom.js"></script>
<script>
	var board_html = '';
	var select_html = '';
	function add_row()
	  {
		var rowCount = $(".html_to .row:last select:last").attr("name").match(/\d+/);
		var rowCount1 = rowCount*1 + 1;		
		jQuery('.html_to').append(board_html);	
		jQuery(".html_to .row:last select:last").attr("name",jQuery(".html_to .row:last select:last").attr("name").replace(/\d+/, rowCount1));
		jQuery('.select2').select2('destroy');
		jQuery('.select2').select2();
		jQuery('.form-horizontal').bootstrapValidator('addField','course_subject['+rowCount1 +'][]',subjectValidators);
		jQuery('.form-horizontal').bootstrapValidator('addField','course_class[]',classValidators);
		jQuery('.form-horizontal').bootstrapValidator('addField','course_board[]',boardValidators);
		validation();
	  }
	   // REMOVING INVOICE ENTRY
	function deleteParentElement(n){
		n.parentNode.removeChild(n);
	}
	  var subjectValidators = '';
	  var classValidators = '';
	  var boardValidators = '';
  jQuery(document).ready(function() {
	    subjectValidators = {   // The title is placed inside a <div class="col-xs-4"> element
            validators: {
                notEmpty: {
                    message: 'The subject is required'
                }
            }
        };
		classValidators = {   // The title is placed inside a <div class="col-xs-4"> element
            validators: {
                notEmpty: {
                    message: 'The Class is required'
                }
            }
        };
		boardValidators = {   // The title is placed inside a <div class="col-xs-4"> element
            validators: {
                notEmpty: {
                    message: 'The Class is required'
                }
            }
        };
    board_html = jQuery('.html_to').html();
	
	select_html = jQuery('#subject_select').html();
	
	jQuery('.select2').select2();
	
    jQuery('#table1').dataTable();
    
    jQuery('#table2').dataTable({
      "sPaginationType": "full_numbers"
    });
    
    
    // Delete row in a table
    jQuery('.delete-row').click(function(){
      var c = confirm("Continue delete?");
      if(c)
        jQuery(this).closest('tr').fadeOut(function(){
          jQuery(this).remove();
        });
        
        return false;
    });    
    // Show aciton upon row hover
    jQuery('.table-hidaction tbody tr').hover(function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 1});
    },function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 0});
    });	
	validation();
  });
  function validation()
  {
	    jQuery('.form-horizontal').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
						 'course_board[]':boardValidators,
						 'course_class[]':classValidators,
						'course_subject[0][]':subjectValidators
			}
	  });
  }
</script>

</body>
</html>

